<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="white-module global-ruleForm"
    :size="formSize"
  >
    <el-form-item label="课堂名称1" prop="name">
      <el-input v-model="ruleForm.title" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="导入课堂" prop="classroom">
      <el-select v-model="ruleForm.classroom" placeholder="请选择">
        <el-option label="AI智能编程" value="shanghai" />
        <el-option label="学习古诗词" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="导入课时" prop="class" >
      <el-select
       
        v-model="ruleForm.class"
        placeholder="请选择"
      >
        <el-option label="AI智能编程" value="shanghai" />
        <el-option label="学习古诗词" value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="课程选择" prop="course">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="课程一" name="type" />
        <el-checkbox label="课程二" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="导入辅助资料" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="课堂评价">
      <div class="comment">已评价<img src="@/assets/classroom/edit.png" /></div>
    </el-form-item>
    <el-form-item label="文件上传" prop="images">
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :headers="headers"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <div class="upload">
          <img src="@/assets/classroom/upload.png" />
          <div class="text">请选择文件上传</div>
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item class="files">
      <div class="item" v-for="(item, index) in 10">
        205494579879{{ item }}.jpg
      </div>
    </el-form-item>
    <el-form-item class="btns">
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >提交</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, UploadProps } from "element-plus";
import app from "@/constants/app.ts";
import {getToken} from "@/utils/cache";
import baseService from "@/service/baseService";
const formSize = ref("default");
const uploadUrl=app.api+"/fii/front/file/upload";
const headers={tokenId:getToken()};
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  title: "",
  classroom: "",
  class: "",
  course: "",
  images: "",
});

const rules = reactive({
  title: [{ required: true, message: "请输入名称", trigger: "blur" }],
  classroom: [
    {
      required: true,
      message: "请选择课堂",
      trigger: "change",
    },
  ],
  class: [
    {
      required: true,
      message: "请选择课时",
      trigger: "change",
    },
  ],
  course: [
    {
      type: "array",
      required: true,
      message: "请选择课程",
      trigger: "change",
    },
  ],
  images: [
    {
      required: true,
      message: "请选择资料",
      trigger: "change",
    },
  ],
});
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("文件小于10MB!");
    return false;
  }
  return true;
};

const submitForm = async (formEl: FormInstance | undefined) => {
  baseService
      .post("/fii/front/classRoom/addOrUpdate",ruleForm)
      .then((res) =>
          {
            if (res.code === 0) {
              ElMessage.success(res.msg);
            } else {
              ElMessage.error(res.msg);
            }
          }
      );

};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
.global-ruleForm {
  padding: 44px 44px 24px;
  .classroom {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .comment {
    color: #4f5a70;
    display: flex;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
      display: block;
      cursor: pointer;
      margin-left: 16px;
    }
  }
  .upload {
    width: 162px;
    height: 110px;

    text-align: center;
    background: rgba(222, 224, 227, 0.23);
    border-radius: 4px;
    border: 1px solid #dee0e3;
    img {
      width: 24px;
      height: 24px;
      margin-top: 30px;
    }
    div {
      margin-top: -12px;
      color: #959ca9;
      font-size: 12px;
    }
  }
  .files {
    display: block;
    margin-top: -5px;
    .item {
      font-size: 12px;
      font-weight: 400;
      color: #00a0e9;
      line-height: 17px;
      margin-right: 24px;
      margin-bottom: 10px;
    }
  }
}
</style>